<template>
  <div class="play-box">
    <template v-for="({ playTypeName, cachePlayList }, index) in renderData.lotteryPlayTypeList" :key="index">
      <div class="title">{{ playTypeName }}</div>
      <div class="play-odds" :class="{ sebo: index === 0 }">
        <LhcButton
          @selectOdds="selectNumber(item, playTypeName)"
          v-for="(item, index) in cachePlayList"
          :data="item"
          :key="index"
          :class="setClass(item)"
        />
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { watch, computed, unref } from 'vue'
import LhcButton from './lhc-button.vue'
import { $utils } from '@/utils'
import { submitBetNow } from '@/api'
import { showToast } from 'vant'
import { useInvestStore } from '@/stores/invest'
import { useCommonLogic } from '@/components/game/tpl-lhc/game/useCommonLogic'
import { useGameStore } from '@/stores/game'

const props = defineProps(['renderData'])
const investStore = useInvestStore()

const gameStore = useGameStore()
const currentHandicapCode = computed(() => gameStore.currentHandicapCode)

const { init, selectPlayType, selectedList, updateInvestList, fillLastNumber, notifyParentInvestList, getParams } =
  useCommonLogic(props)
const currentGameName = computed(() => props.renderData.playTypeName)

watch(currentGameName, () => {
  selectPlayType(0)
})

const selectNumber = (item, preName) => {
  item.betAmount = investStore.getSingleInvestMoney
  item['spliceName'] = `${preName}#${item.playName}`
  let index = selectedList.value.findIndex(({ playCode }) => playCode === item.playCode)

  if (index === -1) {
    selectedList.value.push(item)
  } else {
    selectedList.value.splice(index, 1)
  }

  notifyParentInvestList(selectedList.value)
}

const betNow = async () => {
  if (!investStore.getInvestBtnText.canBat) {
    fillLastNumber()
    return
  }

  if (!$utils.verifyBetAmount(selectedList.value)) return

  const { lotteryCode } = props.renderData
  let params: any = {
    lotteryCode,
    orderDetails: getParams(),
  }

  const capCode = unref(currentHandicapCode.value)
  if (capCode) params.handicapCode = capCode

  try {
    await submitBetNow(params)
    investStore.setLastInvestList(selectedList.value)
    init()
    showToast('下注成功')
  } catch (e) {
    console.log(e)
  }
}
// 生效 设置 样式 zodiac
const setClass = (item) => {
  const isSelected = selectedList.value.includes(item)
  const className = currentGameName.value === '特肖' ? 'zodiac' : 'text'
  return `${isSelected ? 'selected ' : ''}${className}`
}

defineExpose({
  betNow,
  updateInvestList,
})
</script>

<style scoped lang="less">
@import url('./game.less');
.sebo {
  justify-content: space-around !important;
  margin-bottom: 10px;
  box-sizing: border-box;
}
</style>
